// 1.渲染学生成绩（封装成函数）
function renderScore() {
  axios({
    method: 'get',
    url: '/score/list',
  }).then( ({data: res}) => {
    console.log(res)
    if(res.code == 0) {
      // 渲染 - res.data 是对象数据类型，属性是id 值是对象（nama+score）
      // 定义数组
      let arr = []
      for(let k in res.data) {
        // k代表属性。res.daat[k]代表属性值
        arr.push(`
          <tr>
            <th scope="row">${k}</th>
            <td>${res.data[k].name}</td>
            <td data-id="${k}" data-index="1" class="score">${res.data[k].score[0]}</td>
            <td data-id="${k}" data-index="2" class="score">${res.data[k].score[1]}</td>
            <td data-id="${k}" data-index="3" class="score">${res.data[k].score[2]}</td>
            <td data-id="${k}" data-index="4" class="score">${res.data[k].score[3]}</td>
            <td data-id="${k}" data-index="5" class="score">${res.data[k].score[4]}</td>
          </tr>
        `)
      }
      // for循环外面，进行赋值
      tbody.innerHTML = arr.join('')
    }
  })
}
// 获取元素
let tbody = document.querySelector('tbody')
renderScore()

// 2.修改学生成绩
//  2.1点击td.score，向td内部添添加input
tbody.addEventListener('click', function(e) {
  if(!e.target.classList.contains('score')) return
  // 解决input小bug
  if(!/^\d{1,3}$/.test(e.target.innerHTML) && e.target.innerHTML != "") return
  // 赋值num之前，保存原始值
  let num = e.target.innerHTML
  // a方法
  let input = document.createElement('input')
  input.value = num
  // 清空td中所有内容，添加最新input
  e.target.innerHTML = ''
  e.target.appendChild(input)

  // b方法
  // e.target.innerHTML = `<input type="text" value="${num}">`
  // let input = e.target.children[0]
  input.focus() //获取光标

  //  2.2input失去焦点恢复原值
  input.onblur = function() {
    e.target.innerHTML = num
  
  }
  //  2.3input回车修改成绩
  input.onkeyup = function(ev) {
    if(ev.key != 'Enter') return
    axios({
      method: 'POST',
      url: '/score/entry',
      data: {
        "stu_id": this.parentNode.getAttribute('data-id'),  //id
        "batch": this.parentNode.getAttribute('data-index'),  //第几次修改   
        "score": this.value
      },
    }).then( ({data: res}) => {
      // console.log(res)
      if(res.code == 0) {
        toastr.success(res.message)
        // 重新渲染
        renderScore()
      }
    })
  }

})